<template>
  <div class="allUrlConfig">
    <div class="title">
      {{$t('sms.introduce')}}：<br>
      {{$t('configLazyLoad.interfaceConfig.allUrlTip1')}}<br>
      {{$t('configLazyLoad.interfaceConfig.allUrlTip2')}}<br>
      {{$t('configLazyLoad.interfaceConfig.allUrlTip3')}}<br>
      {{$t('configLazyLoad.interfaceConfig.allUrlTip4')}}<a target="_blank" href="http://apis.7moor.com/sso/token/checkTokenLegal">http://apis.7moor.com/sso/token/checkTokenLegal</a>/{{$t('configLazyLoad.interfaceConfig.param')}}:token/{{$t('configLazyLoad.interfaceConfig.param')}}:tokenId<br>
      {{$t('configLazyLoad.interfaceConfig.allUrlTip5')}}<br>
    </div>
    <div style="margin: 20px 0;">
      <span style="margin-right: 20px;">{{$t('configLazyLoad.interfaceConfig.allUrlTip6')}}</span>
      <el-radio-group v-model="form.tokenCheck">
        <el-radio :label="true">{{$t('configLazyLoad.interfaceConfig.open')}}</el-radio>
        <el-radio :label="false">{{$t('configLazyLoad.interfaceConfig.close')}}</el-radio>
      </el-radio-group>
    </div>
    <div style="margin: 20px 0;">
      <span style="margin-right: 4px;">{{$t('configLazyLoad.interfaceConfig.allUrlTip7')}}</span>
      <el-tooltip class="tooltip" effect="dark" content="开启后，在通话模块中推送数据包含手机号会进行加密处理，可通过加密密钥进行解密" placement="bottom">
        <span class="iconfont icon-tixingweizhi"></span>
      </el-tooltip>
      <el-radio-group v-model="form.encryptionCheck">
        <el-radio :label="true">{{$t('configLazyLoad.interfaceConfig.open')}}</el-radio>
        <el-radio :label="false">{{$t('configLazyLoad.interfaceConfig.close')}}</el-radio>
      </el-radio-group>
    </div>
    <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="100px" v-if="form.encryptionCheck">
      <el-form-item label="加密方式">
        <el-select v-model="form.encryType" style="width:160px" placeholder="请选择加密方式">
          <el-option
            v-for="item in encryptArr"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 默认加密 -->
      <el-form-item v-if="form.encryType === 'default'" :label="$t('configLazyLoad.interfaceConfig.encryptionKey')">
        <div style="font-size:12px;">
          <span>{{form.secretKey}}<a style='margin-left:20px; margin-right:10px;' @click = "setRandomKey('secretKey')">{{$t('configLazyLoad.interfaceConfig.updateKey')}}</a></span><span>{{$t('configLazyLoad.interfaceConfig.allUrlTip8')}}</span>
        </div>
      </el-form-item>
      <!-- aes加密 -->
      <div v-else-if="form.encryType === 'aes'">
        <div class="clearfix" style="width:100%">
          <el-form-item label="密钥参数名" prop="aesKey" class="fl">
            <el-input size="mini" style="width:160px" disabled v-model="form.aesKey" placeholder="参数名可用于对接url传递"></el-input>
          </el-form-item>
          <el-form-item label="密钥" prop="aesSecret" class="fl">
            <el-input size="mini" style="width:250px" v-model="form.aesSecret" placeholder="请输入密钥"></el-input>
            <span class="radom-encry" @click.stop="setRandomKey('aesSecret')">随机生成</span>
          </el-form-item>
        </div>
        <div class="clearfix">
          <el-form-item label="偏移量参数名" prop="aesOffsetKey" class="fl">
            <el-input size="mini" style="width:160px" v-model="form.aesOffsetKey" placeholder="参数名可用于对接url传递"></el-input>
          </el-form-item>
          <el-form-item label="偏移量" class="fl">
            <el-input size="mini" style="width:250px" v-model="form.aesOffsetValue" placeholder="请输入偏移量"></el-input>
          </el-form-item>
        </div>
        <div style="margin-bottom:10px">{{$t('configLazyLoad.interfaceConfig.allUrlTip8')}}</div>
      </div>
    </el-form>
    <el-button type="primary" class="primary_btn" @click="updateTokenConfig">{{$t('public.save')}}</el-button>
  </div>
</template>
<script>
  export default {
    name: 'allUrlConfig',
    data () {
      return {
        encryptArr: [
          {label: '默认加密', value: 'default'},
          {label: 'aes加密', value: 'aes'}
        ],
        form: {
          encryType: 'default',
          aesKey: 'key',
          aesSecret: '',
          aesOffsetKey: '',
          aesOffsetValue: '',
          encryptionCheck: false,
          tokenCheck: true,
          secretKey: ''
        },
        rules: {
          aesKey: [
            { required: true, message: '请输入密钥参数名', trigger: 'blur' }
          ],
          aesSecret: [
            { required: true, message: '请输入密钥', trigger: 'blur' }
          ],
          aesOffsetKey: [
            { required: true, message: '请输入偏移量参数名', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      updateTokenConfig () {
        if (this.$refs.form) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.handleSave()   
            }
          })
        } else {
          this.handleSave()
        }
      },
      handleSave () {
        let data = {...this.form}
        data._id = this.$store.state.session.account._id
        this.$store.dispatch('updateTokenConfig', data).then(res => {
          if (res.success) {
            this.$message.success(this.$t('config.channel.saveSuccess'))
          } else {
            this.$message.error(this.$t('config.channel.saveError'))
          }
        })
      },
      getRandomKey () {
        var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
				var nums=""
				for(var i=0;i<32;i++){
					var id = parseInt(Math.random()*61);
					nums+=chars[id]
				}
				return nums
      },
      setRandomKey (type) {
        let key = this.getRandomKey()
        if (this.form.encryptionCheck) {
          this.form[type] = key
        }
      }
    },
    mounted () {
      let account = this.$store.state.session.account
      this.form.tokenCheck = account.tokenCheck || false
      this.form.encryptionCheck = account.encryptionCheck || false
      this.form.encryType = account.encryType || 'default',
      this.form.aesKey = account.aesKey || 'key',
      this.form.aesSecret = account.aesSecret || '',
      this.form.aesOffsetKey = account.aesOffsetKey || '',
      this.form.aesOffsetValue = account.aesOffsetValue || '',
      this.form.secretKey = account.secretKey || this.getRandomKey()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .allUrlConfig
    padding 20px
    height calc(100vh - 180px)
    overflow-y auto
    .title
      color $c-prompt
      line-height 28px
  .tooltip
    margin-right 20px
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #459ae9;
    border-radius: 50%;
    font-size: 10px;
    color: #459ae9;
    text-align: center;
    line-height: 16px;
  .radom-encry
    font-size 12px
    cursor pointer
    padding-left 6px
    color $c-main
  .clearfix:after
    display block
</style>




















